<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>信息页面</title>
  <script src="./static/js/vue.global.js"></script>
  <style>
    .profile {
      font-family: Arial, sans-serif;
      max-width: 600px;
      margin: 20px auto; 
      padding: 20px;
      border: 1px solid #ddd;
      border-radius: 8px;
      background-color: #f9f9f9;
    }

    h1 {
      text-align: center;
      color: #333;
    }

    .signature {
      margin-top: 20px;
    }

    .info-item {
      margin-bottom: 10px;
      font-size: 16px;
      color: #555;
      display: flex; 
      justify-content: space-between; 
      align-items: center; 
    }

    .info-item strong {
      color: #007bff;
    }

    .info-item a {
      color: #28a745;
      text-decoration: none;
    }

    .info-item a:hover {
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <div id="app" class="profile">
    <h1>个人信息</h1>
    <div class="signature">
      <div style="display: flex; flex-direction: column;">
        <span>姓名：{{ name }}</span>
        <span>年龄：{{ age }}</span>
        <span>性别：{{ gender }}</span>
        <span>邮箱：{{ email }}</span>
        <span>地址：{{ address }}</span>
        <span>专业：{{ major }}</span>
        <span>兴趣爱好：{{hobbies}}</span>
      </div>
    </div>
  </div>

  <script>
    var App = {
      data() {
        return {
          name: "虞展健",
          age: 21,
          gender: "男",
          email: "2766476722@qq.com",
          address: "金华市婺城区金华职业技术大学",
          major: "软件技术",
          hobbies:"运动"
        };
      }
    };

    Vue.createApp(App).mount("#app");
  </script>
</body>
</html>